<template>
    <el-dialog
    v-model="dialogVisible"
    width="30%"
    :title="title"
    @close="close"
  >
  <fromData ref="fromRef"  ></fromData>
  <template #footer>
      <span class="dialog-footer">
        <el-button  @click="fromEmpty()">清空</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit()">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  setup>
import { reactive, toRefs,ref } from "vue"
import fromData from "./from.vue";
import {Add,Update} from '/@/api/articlecategory/index'
const emit=defineEmits(['updateList'])
const state=reactive({
    type:'update',
    dialogVisible:false,
    title:"",
    form:{},
    
})
const   fromRef=ref(null)
const open=(type,row={})=>{
   state.dialogVisible=true
   state.type=type
   const from=JSON.parse(JSON.stringify(row))
   if(typeGet()){
    state.title="增加"
   }else{
    state.title="修改"
    setTimeout(()=>{
      fromRef.value.fillFrom(from)
    })
   }
}

const fromEmpty=()=>{
  fromRef.value.empty()
}
const close=()=>{
  fromEmpty()
  state.dialogVisible=false
}
const submit=()=>{
  if(typeGet()){
    Add(fromRef.value.pushForm()).then(()=>{
      emit('updateList')
    })
  }else{
    Update(fromRef.value.pushForm()).then(()=>{
      emit('updateList')
    })
  }
  fromEmpty()
  state.dialogVisible=false
}

const typeGet=()=>{
return state.type=='add' ?  true:false
}

const {dialogVisible,title}=toRefs(state)
defineExpose({
    open,
})
</script>

<style lang="scss" scoped>

</style>